<template>
	<view class="hotelAll">
		<view class="order-title">
			<fui-nav-bar background="rgba(0,0,0,0)" :isFixed="true" :title="hotelTitle" @leftClick="leftClick">
				<fui-icon name="arrowleft" color='#fff'></fui-icon>
			</fui-nav-bar>
		</view>
		<view class="imgAll">
			<view class="kong">
			</view>
			<image class="hotelPn" :src="baseOssUrl + 'icon/bgorder.png'" mode=""></image>
		</view>
		<view class="hotelCotent marin25">
			<view class="hotelTab">
				<view class="content">
					<text class="hotel-text">{{hotelTitle}}</text>
					<!-- 	<view class="hotel-house">
						房间详情
						<image class="hotel-img" :src="baseOssUrl+'icon/rightJt.png'" mode=""></image>
					</view> -->
				</view>
				<view class="hotel-ruzhu">
					入住：{{startTime}} <text class="ruzhu-time">共{{this.getDiffDay(this.staTimevalue, this.endTimevalue)}}晚</text>{{endTime}}
				</view>

				<view class="bioa-style">
					<view class="biao-list" v-for="(pnItem,index) in pnItems" :key='index'>
						<view class="biao-item">
							{{pnItem}}
						</view>
					</view>
				</view>
				<view class="hotel-guize">
					<view class="">
						<text class="guize-wt">整晚留房：</text>预定成功后，酒店将为您整晚留房
					</view>
					<image :src="baseOssUrl + 'icon/guize.png'" mode="" @click="guizePop"></image>
				</view>
				<view class="hotel-guize1">
					<text class="guize-wt">取消规则：</text>放心定，今晚10月2日前可免费取消
				</view>
			</view>
			<!-- 规则 订房必读start-->
			<bottom-popup ref="guizepopup" titleName='订房必读'>
				<template slot="cont">
					<view class="guize-style padding25">
						<view class="guize-title">
							取消政策与服务
						</view>
						<view class="quxiao-title">
							30分钟免费取消
						</view>
						<view class="">
							商家已为您提供预定成功后30分钟内免费取消权益（该权益不受商家取消政策限制）</view>
						<view class="guize-title">
							商家取消政策
						</view>
						<!-- 表格 -->
						<view class="table-box">
							<t-table>
								<t-tr style="background-color: #E8E8E8;">
									<!-- <t-th>序号</t-th> -->
									<t-th>北京时间</t-th>
									<t-th>政策及费用</t-th>
								</t-tr>
								<t-tr v-for="item in tableList" :key="item.id" style="background-color: #F5F5F5;">
									<!-- <t-td>{{ cancelTime }}{{ item.name }}</t-td> -->
									<t-td>{{cancelTime}} {{ item.name }}</t-td>
									<t-td>{{ item.policy }}</t-td>
								</t-tr>
							</t-table>
						</view>
						<view class="guize-title">
							预订提示
						</view>
						<view class="">
							您填写的预订信息和联系方式是酒店或者供应商提供相关服务所需的必要信息，微湖会基于履约必要的目的和范围向酒店或供应商提供。
						</view>
						<view class="guize-title">
							入离时间
						</view>
						<view class="">
							入住时间14:00以后 离店时间 13:30以前。
						</view>
						<view class="guize-title">
							宠物携带
						</view>
						<view class="">
							不允许携带宠物。
						</view>
					</view>
				</template>
			</bottom-popup>
			<!-- 入住信息 -->
			<view style="background: white;border-radius: 10rpx;padding: 20rpx;">
				<view style="margin-bottom: 25rpx;">
					<text style="font-weight: bold;font-size: 36rpx;">入住信息</text>
					<text style="color: #707070;font-size: 26rpx;margin-left: 25rpx;">填写信息需与证件一致</text>
				</view>
				<fui-input disabled :padding="inputStyle" :labelSize="28" textRight label="房间数" v-model="houeseText" placeholder="请选择您的房间数量" @click="goHouse">
					<fui-icon name="arrowright" size="40" color="#707070"></fui-icon>
				</fui-input>
				<fui-input disabled :padding="inputStyle" :labelSize="28" textRight label="预约人" v-model="peploText" placeholder="请选择预约人信息" @click="goZhukeInfo">
					<fui-icon name="edit-fill" size="35" color="#707070"></fui-icon>
				</fui-input>
				<fui-input :padding="inputStyle" :labelSize="28" textRight label="手机号" v-model="phone" type='number' maxlength="11" placeholder="请输入手机号">
				</fui-input>
				<fui-input disabled :padding="inputStyle" :labelSize="28" :borderBottom="false" textRight label="预计到店时间" v-model="timeText" placeholder="请选择您的入住时间" @click='goTime'>
					<fui-icon name="arrowright" size="40" color="#707070"></fui-icon>
				</fui-input>
			</view>
			<!-- 房间数 -->
			<fui-select :show="pShow" :options="options"  title="请选择平台" @confirm="houseChange" @close="houseClose"></fui-select>
			<!-- 预计到店 -->
			<pickerChange ref='timeShow' :optionsArr='timeOptions' @houeseTextS='timeChange'></pickerChange>
			<!-- 留言 -->
			<view class="leavingmes-content padding25">
				<fui-input label="留言" :padding="inputStyle"   :bottomLeft="0" textRight placeholderStyle='font-size:26rpx' placeholder="请输入您的留言" v-model="liuText"></fui-input>
			</view>
			<!-- 发票 -->
			<view class="invoice-content padding25">
				<fui-input disabled label="发票" :padding="inputStyle" :borderBottom='false' :bottomLeft="0" textRight placeholderStyle='font-size:26rpx' placeholder="由酒店开具，支持普通发票"></fui-input>
			</view>
			<!-- 退订政策 -->
			<view class="unsubscribe">
				<view class="unsubscr-wt">
					退订政策
				</view>
				【宽松】入住前一天12:00前可退订，之后退订不退款

				<view class="unsubscr-wt">
					入离时间
				</view>14:00可入住，12：00之前需退房
				<view class="">
					<view class="unsubscr-wt">
						提供发票
					</view>房东可提供发票，如有需要请向房东索要
				</view>
				<view class="">
					<view class="unsubscr-wt">
						用户协议
					</view>继续操作代表您同意房东的《房客服务规则》
					《房客安全须知》
				</view>

			</view>
		</view>
		<!-- 查看房型 -->
		<view class="lookBook padding25">
			<view class="book-detailed" @click="detailedPopup">
				<view class="book-price">
					￥{{priceA}}
				</view>
				<view class="">
					明细 <image :src="baseOssUrl + 'icon/topjt.png' " mode=""></image>
				</view>
			</view>
			<!-- :class="[isSuccess?'isDisable':'lookbtn']" :class="{'isDisable':isSuccess}"-->
			<view class="lookbtn" @click="bookClick" :style="{background:isSuccess?'#ccc':'#35743D'}">
				提交订单

			</view>
		</view>
		<!-- 价格明细 start-->
		<bottom-popup ref="pricepopup" titleName='价格明细'>
			<template slot="cont">
				<view class="price-details padding25">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
						<view class="house-rent">
							房费
						</view>
						<view class="rent-cont">
							<view class="cont-house"  v-for="(ydItem,index) in ydTimeList" :key='index'>
								<view class="">
									{{ydItem}}
									<!-- <text class="breakfast">无早餐</text> -->
								</view>
								<view class="">
									{{houeseText}} x ￥{{price}}
								</view>
							</view>
						</view>
						<view class="price-all">
							<text class="house-rent">总价</text>
							<text class="rent-all">¥{{priceA}}</text>
						</view>
					</scroll-view>
				</view>




				<view class="lookBook1 lookBookO">
					<view class="price-book">
						<view class="book-yaun">
							<text class="yaun-yuan">共{{this.getDiffDay(this.staTimevalue, this.endTimevalue)}}晚</text>
							<text class="yaun-num">¥{{price}}</text>
						</view>
						<view class="book-detailed">
							明细 <image :src="baseOssUrl + 'icon/xiajt.png' " mode=""></image>
						</view>
					</view>
					<view class="lookbtn"  @click="bookClick" :style="{background:isSuccess?'#ccc':'#35743D'}">
						提交订单
					</view>
				</view>
			</template>
		</bottom-popup>
	</view>
</template>

<script>
	import {
		baseOssUrl
	} from '@/common/settings';
	import {
		getPreStrDate
	} from '@/common/common.js';
	import pickerChange from '@/components/component/pickerChange.vue'
	import BottomPopup from '@/components/component/bottomPopup.vue'
	import tTable from '@/components/component/t-table.vue'
	import tTh from '@/components/component/t-th.vue'
	import tTr from '@/components/component/t-tr.vue'
	import tTd from '@/components/component/t-td.vue'
 
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		components: {
			pickerChange,
			tTable,
			tTh,
			tTr,
			tTd,
			BottomPopup, 
		},
		// computed: mapState(['userId']),
		computed:{
			
		},
		data() {
			return {
				baseOssUrl: baseOssUrl,
				inputStyle: ['28rpx','0rpx','28rpx','0rpx'],
				// houseShow: false, 
				houeseText: 1,
				options: [],
				pShow: false,
				valName: '',

				selectList: [{
						slectValue: 0,
						name: '朱小仙'
					},
					{
						slectValue: 1,
						name: '关小川'
					}, {
						slectValue: 2,
						name: '朱小仙'
					},
				],
				// peploText: [],
				peploText: '',
				// QCellCoreOptions:['中国大陆+86','中国香港+852','中国澳门+853','中国大陆+86','中国台湾+886']
				phoneText: '',
				timeOptions: ['12:00前', '13:00前', '14:00前', '15:00前', '16:00前', ],
				timeText: '',
				tableList: [{
						id: 0,
						name: '18:00前',
						policy: '免费取消'
					},
					{
						id: 1,
						name: '18:00后',
						policy: '不可取消'
					},

				],
				hotelTitle: '',
				roomId: '',
				ydTime: '',
				mId: 0,
				poupData: {},
				phone: '',
				liuText: '', //留言
				roomIds: [], //房间ids
				payNumber: '', //订单编号
				userId: '',
				isSuccess: false, //是否成功
				price: '',
				startTime: '',
				endTime: '',
				staTimevalue: '',
				endTimevalue: '',
				pnItems: [],
				priceA:'',
				getNum:1,
				ydTimeList:[],
				cancelTime:''
			}
		},
		onLoad(op) {
			console.log("op", op)
			this.hotelTitle = op.hotelTitle
			 this.roomIds.push(op.roomId)
			console.log("oproomIds",this.roomIds.join())
			this.ydTime = op.ydTime
			this.ydTimeList = this.ydTime .split(',')
			
			this.poupData = JSON.parse(op.poupData)
			this.mId = this.poupData.mid
			this.price = op.price 
		
			this.startTime = op.startTime
			this.endTime = op.endTime
			
			this.staTimevalue = op.staTimevalue
			this.endTimevalue = op.endTimevalue
			this.cancelTime = getPreStrDate(this.staTimevalue,-1)
			this.getNum = this.getDiffDay(this.staTimevalue, this.endTimevalue)
			if(this.getNum == 1){
				this.priceA = this.price
			}else{
				this.priceA = this.price*this.getNum
			}
			console.log("getNum",this.getNum,this.priceA)
			this.pnItems = JSON.parse(op.pnItems)
			this.options = [];
			let num = 0;
			this.poupData.merchantRoomList.map((val, index) => {
				if (op.price == val.jg) {
					num++
					console.info(num)
					this.options.push({
						text: num + '间',
						value: val.id,
						num: num
					})
				}
			})
		},
		created() {},
		onShow() {
			this.userId = uni.getStorageSync("yc_m_userId")
			this.peploText = uni.getStorageSync("yuyueName")
		},
		onPullDownRefresh() {
			console.log('开始');
			setTimeout(function() {
				console.info('请求结束')
				uni.stopPullDownRefresh();
			}, 1000);

		},
		
		methods: {
			
			// 计算两个日期之间的差值
			getDiffDay(date_1, date_2) {
				let totalDays, diffDate
				let tm1 = date_1
				let dt1 = new Date(tm1.replace(/-/g,'/'))
				let tm2 = date_2
				let dt2 = new Date(tm2.replace(/-/g,'/'))
				let myDate_1 = Date.parse(dt1)
				let myDate_2 = Date.parse(dt2)
				// 将两个日期都转换为毫秒格式，然后做差
				diffDate = Math.abs(myDate_1 - myDate_2) // 取相差毫秒数的绝对值
			
				totalDays = Math.floor(diffDate / (1000 * 3600 * 24)) // 向下取整 
				console.log(totalDays,'这俩是什么')
				return totalDays // 相差的天数
			},
			leftClick() {
				uni.navigateBack({
					delta: 1
				});
			},

			goPay(payNumber) {
				this.$http.post(this.$httpApi.ordeWxPay + "?userId=" + this.userId + "&number=" + this.payNumber).then(res => {
					if (res.code == 0) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.response.timeStamp,
							nonceStr: res.response.nonceStr,
							package: 'prepay_id=' + res.response.prepayId,
							signType: 'MD5',
							paySign: res.response.paySign,
							success: re => {
								console.log("baocunid",res,re)
								uni.navigateTo({
									url: "/pages/paySuccess/index?orderId="+res.orderId
								})
								console.log('success:' + JSON.stringify(res));
							},
							fail: err => {
								uni.navigateTo({
									url: "/pages/hotelOrderDetails/index?isNo=noPay"+'&orderId='+res.orderId
								})
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}
				})
			},
			bookClick() {
				if (this.isSuccess) {
					return false
				}
				this.$http.post(this.$httpApi.ordeSave, {
					data: {
						ydTime: this.ydTime,
						// roomId: this.roomId,
						roomIds: this.roomIds.join(),
						userId: this.userId,
						mId: this.mId,
						phone: this.phone,
						zName: this.peploText, //预约人name
						yjddTime: this.timeText, //  到店时间
						text: this.liuText // 留言
					}
				}).then(res => {
					if (res.code == 0) {
						this.payNumber = res.number
						this.isSuccess = true
						this.goPay(res.number)
						this.peploText=''
					} else if(res.code == 507){
						uni.showToast({
							title: '房间已经被预定完',
							duration: 2000
						});
					}
				})
			},
			goZhukeInfo() {
				uni.navigateTo({
					url: "/pages/guestInformation/index?userId=" + this.userId
				})
			},
			// 明细弹窗
			detailedPopup() {
				this.$refs.pricepopup._show();
			},
			// 规则订房必读
			guizePop() {
				this.$refs.guizepopup._show();
			},
			// 房间数量弹窗
			goHouse() {
				// this.$refs.pickShow.goHouse()
				this.pShow = true
			},
			// 入住时间弹窗
			goTime() {
				this.$refs.timeShow.goHouse()
			},
			// 入住时间回显
			timeChange(e) {
				this.timeText = e
			},
			// 房间数量回显
			houseChange(e) {
				console.log("1",e)
				this.roomIds=[]
				for (let i = 0; i < e.options.num; i++) {
					this.roomIds.push(this.options[i].value);
				}
				console.log("eeeee",this.roomIds)
				this.houeseText = this.roomIds.length;
				this.pShow = !this.pShow;
				this.priceA = (this.price * e.options.num).toFixed(2)

			
		   }, 
			houseClose() {
				this.pShow = false
			},
			// end
			nameChange(e) {
				this.selectList.forEach(val => {
					if (val.slectValue == e.detail.value) {
						this.peploText = val.name
					}
				})

			}



		}
	}
</script>

<style lang="scss" scoped>
	.hotelAll {
		height: 100%;

		.order-title {
			color: #FFFFFF;
		}

		.imgAll {
			.kong {
				height: 50rpx;
				background: #35743D;
			}

			.hotelPn {
				width: 100%;
				height: 300rpx;
			}
		}


		.hotelCotent {
			.hotelTab {
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-top: -120rpx;
				position: relative;
				z-index: 99;
				// box-shadow: -5px 8px 18px 1px rgba(0, 0, 0, 0.1);
				padding: 24rpx;
				margin-bottom: 26rpx;
				color: #2E2E2E;

				.content {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.hotel-text {
						font-size: 32rpx;
						font-weight: bold;
					}

					.hotel-house {
						font-size: 26rpx;
						color: #707070;

						.hotel-img {
							width: 10rpx;
							height: 20rpx;
							margin-left: 10rpx;
						}
					}

				}
			}

			// 入住
			.hotel-ruzhu {
				font-size: 28rpx;
				line-height: 50rpx;

				.ruzhu-time {
					margin: 0 10rpx;
					font-size: 20rpx;
					padding: 5rpx 20rpx;
					border: 1px solid #B4B4B4;
					border-radius: 25rpx;
				}
			}

			// title标签
			.bioa-style {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				overflow: hidden;

				.biao-list {
					padding: 0 20rpx;

					position: relative;

					.biao-item {
						color: #B4B4B4;
						font-size: 26rpx;
						padding: 3 6rpx;
						float: left;
						background: #F8F8F8;
						// height: 42rpx;
						margin: 10rpx;
					}
				}
			}

			// 标识
			.hotel-title {
				font-size: 26rpx;
				margin-bottom: 24rpx;
			}

			.hotel-guize {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				color: #707070;
				line-height: 40rpx;

				image {
					width: 38rpx;
					height: 38rpx;
				}

				.guize-wt {
					font-weight: bold;
				}
			}

			.hotel-guize1 {
				font-size: 24rpx;
				color: #707070;
				line-height: 40rpx;

				.guize-wt {
					font-weight: bold;
				}
			}

			 
			.invoice-content {
				margin-top: 24rpx;
				background: #FFFFFF; 
				border-radius: 16rpx;
			}

			.leavingmes-content {
				margin-top: 24rpx;
				background: #FFFFFF; 
				border-radius: 16rpx;
			}

			// 退订政策
			.unsubscribe {
				font-size: 28rpx;
				color: #707070;
				// font-weight: bold;
				margin-top: 37rpx;
				padding-bottom: 200rpx;
				line-height: 50rpx;

				.unsubscr-wt {
					font-weight: bold;
					margin-top: 10rpx;
				}
			}

			// 表格
			.guize-style {
				color: #707070;
				font-size: 26rpx;
				padding-bottom: 30rpx;

				.table-box {
					width: 80%;
					margin: 0 auto;
				}

				// 订房必读文字样式
				.guize-title {
					font-size: 28rpx;
					color: #1D1D1D;
					font-weight: bold;
					margin: 30rpx 0 10rpx 0;
				}

				.quxiao-title {
					color: #35743D;
					margin-bottom: 10rpx;
				}
			}

		}

		// 查看房型 
		.lookBook {
			background: #FFFFFF;
			width: 100%;
			height: 120rpx;
			position: fixed;
			bottom: 0rpx;
			// right: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 999;
			font-size: 28rpx;

			.price-book {
				margin-left: 40rpx;

				.book-yaun {
					font-size: 28rpx;
					color: #989898;

					.yaun-yuan {
						// text-decoration: line-through;
						margin-right: 17rpx;
					}

					.yaun-num {
						color: #D93C3C;
						font-weight: bold;
					}
				}



				.book-num {
					width: 120rpx;
					height: 40rpx;
					background: #35743D;
					border-radius: 30rpx 0 30rpx 0;
					color: #FFFFFF;
					text-align: center;
					line-height: 40rpx;
					font-size: 20rpx;
					font-weight: 400;
				}
			}

			// 明细
			.book-detailed {

				// font-size: 24rpx;
				// position: absolute;
				// right: 37%;
				.book-price {
					color: #D93C3C;
				}

				image {
					width: 16rpx;
					height: 8rpx;
					margin: 0 10rpx 6rpx;
					// margin-bottom: 6rpx;
				}


			}

			// 立即预订
			.lookbtn {
				color: #FFFFFF;
				// width: 240rpx;
				height: 72rpx;
				background-color: #35743D;
				border-radius: 38rpx;
				text-align: center;
				line-height: 72rpx;
				margin: 0 50rpx;
				padding: 0rpx 60rpx;
			}
		}

		.price-details {
			// height: 100rpx;
			padding-bottom: 150rpx;
			color: #707070;
			font-size: 30rpx;

			.house-rent {
				font-weight: bold;
				color: #1D1D1D;
				margin: 30rpx 0 16rpx 0;
			}

			.rent-cont {
				.cont-house {
					display: flex;
					justify-content: space-between;

					.breakfast {
						margin-left: 15rpx;
					}
				}
			}

			.price-all {
				display: flex;
				justify-content: space-between;
				font-weight: bold;
				align-items: center;

				.rent-all {
					color: #D93C3C;
				}
			}

		}

		.lookBook1 {
			background: #FFFFFF;
			width: 100%;
			// height: 120rpx;
			position: fixed;
			bottom: 0rpx;
			// right: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 999;
			font-size: 28rpx;

			.price-book {
				margin-left: 40rpx;

				.book-yaun {
					font-size: 28rpx;
					color: #989898;

					.yaun-yuan { 
						margin-right: 17rpx;
					}

					.yaun-num {
						font-size: 26rpx;
						color: #D93C3C;
						font-weight: bold;
					}
				}



				.book-num {
					width: 120rpx;
					height: 40rpx;
					background: #35743D;
					border-radius: 30rpx 0 30rpx 0;
					color: #FFFFFF;
					text-align: center;
					line-height: 40rpx;
					font-size: 20rpx;
					font-weight: 400;
				}
			}

			// 明细
			.book-detailed {
				font-size: 24rpx;
				position: absolute;
				right: 37%;
				bottom: 46%;

				image {
					width: 16rpx;
					height: 8rpx;
					margin-left: 10rpx;
					margin-bottom: 6rpx;
				}

				.isDisable {
					background-color: #ccc;
				}
			}

			// 立即预订
			.lookbtn {
				color: #FFFFFF;
				// width: 240rpx;
				height: 72rpx;
				background-color: #35743D;
				border-radius: 38rpx;
				text-align: center;
				line-height: 72rpx;
				margin: 0 20rpx;
				padding: 0rpx 60rpx;
			}

		}



		.lookBookO {
			border-top: 1px solid #D0D0D0;
			padding: 5px 0 50rpx 0;
		}
	}
</style>
